body {
    background: url("../images/古风背景.jpg") no-repeat !important;
    background-size: 100% 100% !important;
    background-attachment: fixed !important;
    background-position: center 0 !important;
    /** 鼠标样式 开始**/
    /** 普通指针样式**/
    cursor: url(../images/鼠标样式/cursor_1.png), default;
}

/*----------------代码片段超出-------------------------*/

pre {
    overflow-x:auto !important;
}

/** 链接指针样式**/

a:hover {
    cursor: url(../images/鼠标样式/cursor_2.png), pointer;
}

button:hover {
    cursor: url(../images/鼠标样式/cursor_3.png), default;
}


/** 鼠标样式 结束**/

/*-----------------加载动画----------------------*/


.loader {
    /*这里把这个图片放到知道首页加载完*/
    background-color: #fff;
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
    z-index: 99999999999999999999 !important;
}

.loader div {
    position: relative;
    width: 4% !important;
    height: 40% !important;
    margin-left: 6% !important;
    margin-right: 6% !important;
    margin-top: 15%;
    margin-bottom: 10%;
    overflow: hidden !important;
    border-radius: 50px !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), #edf1f4);
    border: 2px solid #edf1f4;
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1),
    -15px -15px 20px #fff,
    inset -5px -5px 5px rgba(255, 255, 255, 0.5),
    inset 5px 5px 5px rgba(0, 0, 0, 0.05);
}

.loader div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    border-radius: 50px;
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1),
    -15px -15px 20px #fff,
    inset -5px -5px 5px rgba(255, 255, 255, 0.5),
    inset 5px 5px 5px rgba(0, 0, 0, 0.05);
}

.loader div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.1),
    0 420px 0 400px #2196f3;
    animation: animate 2.5s ease-in-out infinite;
    animation-delay: calc(var(--x) * -0.3s);
    transform: translateY(160px);
}

@keyframes animate {
    0% {
        transform: translateY(350px);
        filter: hue-rotate(0deg);
    }

    50% {
        transform: translateY(0px);
        filter: hue-rotate(180deg);
    }

    100% {
        transform: translateY(350px);
        filter: hue-rotate(360deg);
    }
}


/* --------------- 我的进度条 ------------------- */

.myprogress {
    width: 100% !important;
    position: fixed !important;
    top: 0 !important;
    /* 这里设置成最大值，让它显示出来 */
    z-index: 99 !important;
}

.mybar {
    width: 0%;
}


/* --------------------设置轮播图 ------------------ */

.m-lunbo-button-left {
    display: none;
    font-size: 100px !important;
    top: 400px;
    left: 0px;
    color: pink;
    z-index: 1;
}

.m-lunbo-button-right {
    font-size: 100px !important;
    top: 400px;
    right: 0px;
    color: pink;
    z-index: 1;
}


/* -----------------间距设置-------------------- */

.m-padded-mini {
    padding: 0.2em !important;
}

.m-padded-tiny {
    padding: 0.3em !important;
}

.m-padded-tb-mini {
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
}

.m-padded-tb-tiny {
    padding-top: 0.3em !important;
    padding-bottom: 0.3em !important;
}

.m-padded-tb-small {
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
}

.m-padded-tb {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}

.m-padded-tb-large {
    padding-top: 2em !important;
    padding-bottom: 2em !important;
}

.m-padded-tb-big {
    padding-top: 3em !important;
    padding-bottom: 3em !important;
}

.m-padded-tb-huge {
    padding-top: 4em !important;
    padding-bottom: 4em !important;
}

.m-padded-tb-massive {
    padding-top: 5em !important;
    padding-bottom: 5em !important;
}

.m-padded-lr-reponsive {
    padding-left: 4em !important;
    padding-right: 4em !important;
}


/* ---------text-------------- */


/* 字体瘦长 */

.m-text {
    font-weight: 300 !important;
    letter-spacing: 1px !important;
    line-height: 1.8 !important;
}

.m-text-thin {
    font-weight: 300 !important;
}


/* 字符之间距离 */

.m-text-spaced {
    letter-spacing: 1px !important;
}


/* 行间距 */

.m-text-lined {
    line-height: 1.8 !important;
}


/* -----------------透明度------------------------- */


/* 透明度降低 */

.m-opacity-mini {
    opacity: 0.8 !important;
}

.m-opacity-tiny {
    opacity: 0.6 !important;
}


/* ------------------ margin----------------------- */

.m-margin-tb-tiny {
    margin-top: 0.3mm !important;
    margin-bottom: 0.3em !important;
}

.m-margin-top-small {
    margin-top: 0.5em !important;
}

.m-margin-top {
    margin-top: 1em !important;
}

.m-margin-top-large {
    margin-top: 2em !important;
}

.m-margin-bottom-small {
    margin-bottom: 0.5em !important;
}


/* ----------------- display  --------------------- */

.m-inline-block {
    display: inline-block;
}


/* ------------------container------------------------- */


/* 宽度大小 */

.m-container {
    max-width: 72em !important;
    margin: auto !important;
}

.m-container-small {
    max-width: 60em !important;
    margin: auto !important;
}


/* --------------------阴影------------------------- */

.m-shadow-small {
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* --------------------position---------------------- */

.m-fixed {
    position: fixed;
    z-index: 1 !important;
}

.m-left-bottom {
    bottom: 10% !important;
    left: 2.5% !important;
}


/* -------------------字体颜色----------------------- */

.m-black {
    color: #333 !important;
}

.m-teal {
    color: #00B5AD !important;
}


/* ---------------------位置---------------------- */

.m-right-top {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}

@media screen and (max-width: 768px) {
    .m-mobile-hide {
        display: none !important;
    }
    .m-padded-lr-reponsive {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .m-mobile-lr-clear {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .m-mobile-wide {
        width: 100% !important;
    }

    /* 当在小屏幕的时候 */
    .m-left-bottom {
        bottom: 10% !important;
        left: 0 !important;
        
    }
}

@media screen and (min-width: 768px) {
    .m-mobile-show {
        display: none !important;
    }
}